<template>
    <div>
      <el-row :gutter="24"  style="margin-top: 25px">
        <!--<el-col :sapn="6" :offset="2">
          <el-input  type="textarea" v-model="input1" style="height: 100px"></el-input>
        </el-col>
        <el-col :sapn="6" >
          <el-input v-model="input2" type="textarea" style="height: 100px"></el-input>

        </el-col>-->
        <el-col :offset="1" :span="8" style="text-align: center;font-family: KaiTi;font-size: 30px" >Json字符串
          <el-input  type="textarea" :rows="30" v-model="input1" v-on:change="change"  style="margin-top: 10px"></el-input>
        </el-col>
        <el-col :offset="2" :span="10"style="text-align: center;font-family: KaiTi;font-size: 30px" >Json格式化
          <el-input  type="textarea" :rows="30" readonly="readonly" v-model="input2" style="margin-top: 10px"></el-input>
        </el-col>
      </el-row>
    </div>
</template>

<style >
  .el-input__inner{
   height: 600px;
  }
</style>

<script>

    export default {
        data() {
            return {
              input1: '',
              input2:'',
            }
        },
      methods:{
          change(value){
            this.input2 = JSON.stringify(JSON.parse(value),null,4);
            console.log(this.input2);//这是在输出框的json数据确实被格式话了
            $(".showMessage").html("<pre>"+this.input2+"</pre>" );
          }

      }
    }

</script>
